<template>
  <div class="banner" >
    <div class="container" v-on="{ mouseover: clearTimer, mouseout: setTimer }">
      <div id="slide" >
        <template v-for="(item, index) in images">
          <div
            class="item"
            ref="item"
            :key="index"
            :style="{ backgroundImage: `url(${item.image})` }"
          >
            <div class="content">
              <div class="name">{{ item.name }}</div>
              <div class="des">{{ item.technology }}</div>
              <button class="more">查看更多</button>
            </div>
          </div>
        </template>
      </div>
      <div class="buttons">
        <div class="s_button" @click="next()">&lt;</div>
        <div class="s_button" @click="prevent()">&gt;</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      direction: true,
      timer: "",
      images: [
        {
          image:
            "/assets/images/1135916c54ca4e5e8c4df3f2422a3acb.png",
          name: "绿色彩云八宝金龙纹妆花缎男夹蟒袍",
          technology: "织绣",
        },
        {
          image: "/assets/images/0653b536cf61443fbaa4680ef1a8e8a0.png",
          name: "乾隆款画珐琅西番莲纹椭圆瓜棱式盒",
          technology: "珐琅器",
        },
        {
          image: "/assets/images/f565c790a60f4fd4bc5dd0617a355e29.png",
          name: "万历款青花五彩鱼藻纹蒜头瓶",
          technology: "陶瓷",
        },
        {
          image: "/assets/images/26df7774be7c4b08a05fadc60ed512f4.png",
          name: "黄杨木雕带链葫芦",
          technology: "雕刻工艺",
        },
        {
          image: "/assets/images/f9e0953898bf4a489da40d4780fd5228.png",
          name: "绿色玻璃",
          technology: "其他工艺",
        },
      ],
    };
  },
  mounted() {
    this.timer = setInterval(this._move, 2500);
  },
  methods: {
    next() {
        this.images.push(this.images.shift());
    },
    prevent() {
            this.images.unshift(this.images.pop());
            this.direction = false;
    },
    _move() {
      if (this.direction) this.next();
      else this.prevent();
    },
    clearTimer() {
      clearInterval(this.timer);
    },
    setTimer() {
      this.timer = setInterval(this._move, 2500);
    },
  },
};
</script>
<style scoped>
.banner {
  display: flex;
  background: #5f806f;
  overflow: hidden;
  font-size: 25px;
  height: 600px;
  position: relative;
}
.container {
  width: 1200px;
  height: 550px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -47%);
  background: #37483f;
  padding: 50px;
  box-shadow: 0px 0px 30px #dbdbdb;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
#slide {
  width: max-content;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-top: 50px;
}
.item {
  width: 200px;
  height: 300px;
  background-position: 50%, 50%;
  display: inline-flex;
  background-size: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 20px;
  box-shadow: 0 10px 30px #a8a9a8;
  transition: 0.8s;
}
.item:nth-child(1),
.item:nth-child(2) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  border-radius: 0px;
  box-shadow: none;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.item:nth-child(3) {
  left: 50%;
}
.item:nth-child(4) {
  left: calc(50% + 220px);
}
.item:nth-child(5) {
  left: calc(50% + 440px);
}
.item:nth-child(n + 6) {
  left: calc(50% + 660px);
  opacity: 0;
}
.item .content {
  width: 300px;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  font-family: system-ui;
  color: #eee;
  display: none;
}
.item:nth-child(2) .content {
  display: block;
}
.item .name {
  font-size: 40px;
  font-weight: bold;
  opacity: 0;
  animation: showcontent 1s ease-in-out 1 forwards;
}
.item .des {
  margin: 20px 0;
  opacity: 0;
  animation: showcontent 1s ease-in-out 0.3s 1 forwards;
}
.item button {
  padding: 10px 20px;
  border: none;
  opacity: 0;
  animation: showcontent 1s ease-in-out 0.6s 1 forwards;
}
@keyframes showcontent {
  from {
    opacity: 0;
    transform: translateY(100px);
    filter: blur(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.buttons {
  width: 100%;
  position: absolute;
  bottom: 50px;
  margin-left: -50px;
  text-align: center;
}
.s_button {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #c1bcbc;
  margin: 0 50px;
  font-size: 25px;
  background: #2a514e;
  border-radius: 50%;
  font-weight: bold;
  box-shadow: 1px 1px 20px #d0d1d0;
  transition: 0.5s;
}
.s_button:hover {
  cursor: pointer;
  background: #234340;
  color: #eeecec;
}
.more {
  display: block;
  width: 100px;
  line-height: 20px;
  text-align: center;
  color: #c2bebe;
  background: rgba(42, 81, 78, 0.9);
  border-radius: 10%;
  font-weight: bold;
  box-shadow: 1px 1px 20px #d0d1d0;
  transition: 0.5s;
}
.more:hover {
  cursor: pointer;
  color: #faf7f7;
  background: #1e3937;
}
</style>